<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 700px;;
            height: 500px;
            border-radius: 10px;;
            background-color: aqua;
            display: grid;
            place-items: center;
            margin: 100px auto;
            color:white;
            font-size: 35px;
            font-weight: 700;
        }
        
        @keyframes movetop {
            from{
                opacity: 0;
                transform: translateY(-200px)
            }
            to{
                opacity: 1;
                transform: translateY(0)
            }
        }

        @keyframes moveleft {
            from{
                opacity: 0;
                transform: translateX(-600px)
            }
            to{
                opacity: 1;
                transform: translateX(0)
            }
        }

        @keyframes moveright {
            from{
                opacity: 0;
                transform: translateX(600px)
            }
            to{
                opacity: 1;
                transform: translateX(0)
            }
        }

        @keyframes selaceDown {
            from{
                opacity: 0;
                transform: scale(0.5);
            }
            to{
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes selaceUp {
            from{
                opacity: 0;
                transform: scale(1.5);
            }
            to{
                opacity: 1;
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
    <div class="box_parentNode">
        
    </div>
</body>
</html>
<script>
    var box = document.getElementsByClassName("box")
    var box_parentNode = document.getElementsByClassName("box_parentNode")
    var arr = ["movetop","moveleft","moveright","selaceDown","selaceUp"]
    var ob = new IntersectionObserver(data=>{
        // if(index == 0){
        //     isUnobserve(index)
        //     index ++
        //     return
        // }
        // isUnobserve(index)
        function isUnobserve(){
            for (const key in data) {
                console.log(data)
                var math = Math.round(Math.random()*4)
                if(data[key].isIntersecting == true){
                    data[key].target.style.animation = `${ arr[math] } 3s forwards`
                    //取消观察器
                    ob.unobserve(data[key].target)
                }
            }
        }
        isUnobserve()
    })
    //随机颜色
    //Math.round 四舍五入
    //Math.cell 向上舍入
    //Math.floor 向下舍入
    function math(){
        var a = Math.round(Math.random()*256)
        var b = Math.round(Math.random()*256)
        var c = Math.round(Math.random()*256)
        return `${ a } ${ b } ${ c }`
    }

    function init_created(){
        for(var i = 0;i<10;i++){
            var mathRandom = math()
            var created = document.createElement("div")
            created.classList.add("box")
            created.innerHTML = i + 1
            created.style.backgroundColor = `rgba(${ mathRandom })`
            box_parentNode[0].appendChild(created)
            //添加观察器
            ob.observe(box[i])
        }
    }
    init_created()
</script>